import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
export interface TopMenu {
  title: string;
  link?: string;
}

@Component({
  selector: 'app-scrollable-tab',
  templateUrl: './scrollable-tab.component.html',
  styleUrls: ['./scrollable-tab.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ScrollableTabComponent {
  @Input() menus: TopMenu[] = [];
  @Input() bgColor = '#fff';
  @Input() titleColor = '#000';
  @Input() titleActiveColor = 'red';
  @Input() indicatorBgColor = 'red';
  @Output() tabSelected = new EventEmitter();

  selectedIndex = 0;
  hanldSelectedIndex = (index: number) => {
    this.selectedIndex = index;
    this.tabSelected.emit(this.menus[index]);
  }

}
